<template>
  <div class="search">

    <el-input
        class="margin-top-20"
        @blur="searchByCinemaName"
        placeholder="请输入影院名查询"
        prefix-icon="el-icon-search"
        v-model="cinemaName">
    </el-input>

    <el-divider/>

    <!-- 品牌查找-->
    <search-template
        @toSearchSingle="searchSingle"
        @toSearchAll="searchAll"
        :buttons="brandButtons"
        description="品牌"/>
    <el-divider/>
    <!-- 行政区查询-->
    <search-template
        @toSearchSingle="searchSingle"
        @toSearchAll="searchAll"
        :buttons="districtButtons"
        description="行政区"/>
    <el-divider/>
    <!-- 特殊厅查询-->
    <search-template
        @toSearchSingle="searchSingle"
        @toSearchAll="searchAll"
        :buttons="specialHallButtons"
        description="特殊厅"/>
    <el-divider/>
    <!-- 服务查询-->
    <search-template
        @toSearchSingle="searchSingle"
        @toSearchAll="searchAll"
        :buttons="movieServiceButtons"
        description="服务"/>
  </div>
</template>

<script>
import SearchTemplate from "@/views/cinema/cinema_search/template/SearchTemplate";

export default {
  name: "Search",
  components: {
    SearchTemplate,
  },
  data() {
    return {
      cinemaName: '',
      brandButtons: [],
      districtButtons: [],
      specialHallButtons: [],
      movieServiceButtons: [
        {
          id: 1,
          name: '可改签',
          isActive: false
        },
        {
          id: 2,
          name: '可退票',
          isActive: false
        },
      ]
    }
  },
  methods: {
    searchByCinemaName() {
      this.$emit("searchByCinemaName", this.cinemaName)
    },
    //查单个
    searchSingle(condition) {
      this.$emit("toSearchSingle", condition)
    },
    //查询所有
    searchAll(description) {
      this.$emit("toSearchAll", description)
    },
    //品牌
    getBrandButtons() {
      this.$http({
        url: '/web/cinema/searchCondition/allBrands',
        method: 'get'
      }).then(({data}) => {
        this.brandButtons = data.data
      })
    },
    //行政区
    getDistrictButtons() {
      this.$http({
        url: '/web/cinema/searchCondition/allArea',
        method: 'get'
      }).then(({data}) => {
        this.districtButtons = data.data
      })
    },
    //特殊厅
    getSpecialHallButtons() {
      this.$http({
        url: '/web/cinema/searchCondition/allHallType',
        method: 'get'
      }).then(({data}) => {
        this.specialHallButtons = data.data
      })
    },
  },
  created() {
    this.getBrandButtons()
    this.getDistrictButtons()
    this.getSpecialHallButtons()
  }
}
</script>

<style scoped>
.search {
  border: #DCDFE6 solid 1px;
  padding-left: 20px;
  margin-top: 30px;
  padding-bottom: 20px;
  padding-right: 20px;
}
</style>